<!DOCTYPE html>
<html>
<head>
    <title>Polar line</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
            <div class="demo-section k-content">
                <div id="chart"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        title: {
                            text: "Polar plot"
                        },
                        seriesDefaults: {
                            type: "polarLine",
                            style: "smooth"
                        },
                        series: [{
                            data: [
                                [0, 0], [15, 2], [30, 4],
                                [45, 6], [60, 8], [75, 10],
                                [90, 12], [105, 14], [120, 16],
                                [135, 18], [150, 20], [165, 22],
                                [180, 24], [195, 26], [210, 28],
                                [225, 30], [240, 32], [255, 34],
                                [270, 36], [285, 38], [300, 40],
                                [315, 42], [330, 44], [345, 46],
                                [360, 48], [15, 50], [30, 52],
                                [45, 54], [60, 56], [75, 58], [90, 60]
                            ]
                        },{
                            data: [
                                [0, 0], [15, 1], [30, 2],
                                [45, 3], [60, 4], [75, 5],
                                [90, 6], [105, 7], [120, 8],
                                [135, 9], [150, 10], [165, 11],
                                [180, 12], [195, 13], [210, 14],
                                [225, 15], [240, 16], [255, 17],
                                [270, 18], [285, 19], [300, 20],
                                [315, 21], [330, 22], [345, 23],
                                [360, 24], [15, 25], [30, 26],
                                [45, 27], [60, 28], [75, 29], [90, 30]
                            ]
                        },{
                            data: [
                                [0, 0], [15, 3], [30, 6],
                                [45, 9], [60, 12], [75, 15],
                                [90, 18], [105, 21], [120, 24],
                                [135, 27], [150, 30], [165, 33],
                                [180, 36], [195, 39], [210, 42],
                                [225, 45], [240, 48], [255, 51],
                                [270, 54], [285, 57], [300, 60],
                                [315, 63], [330, 66], [345, 69],
                                [360, 72], [15, 75], [30, 78],
                                [45, 81], [60, 84], [75, 87], [90, 90]
                            ]
                        }]
                    });
                }

                $(document).ready(createChart);
                $(document).bind("kendo:skinChange", createChart);
            </script>
        </div>


    
    
</body>
</html>
